import React,{ PureComponent } from 'react';
import { connect } from 'react-redux';
import {
    HomeWrapper,
    HomeLeft,
    HomeRight,
    BackTop
} from './style';
import Topic from "./components/Topic";
import List from "./components/List";
import Recommend from "./components/Recommend";
import Writer from "./components/Writer";
import { actionCreators } from './store';

class Home extends PureComponent{

    scrollTop() {
        window.scrollTo(0, 0);
    }

    render() {
        return (
            <HomeWrapper>
                <HomeLeft>
                    <img alt="" className="banner-img" src="//upload.jianshu.io/admin_banners/web_images/4479/ae6b245924326d3fce832a682033255b862dea88.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" />
                    <Topic>

                    </Topic>
                    <List />
                </HomeLeft>
                <HomeRight>
                    <Recommend />
                    <Writer />
                </HomeRight>
                {
                    this.props.showScroll ? <BackTop onClick={this.scrollTop}>顶部</BackTop> : null
                }

            </HomeWrapper>
        );
    }
    componentDidMount() {
        this.props.changeHomeData();
        window.addEventListener("scroll", this.props.changeScrollTopShow);
    }

    componentWillUnmount() {
        window.removeEventListener("scroll", this.props.changeScrollTopShow);
    }

}
const mapStateToProps = (state) => ({
    showScroll: state.getIn(["home", "showScroll"])
});
const mapDispatchToProps = (dispatch) => ({
    changeHomeData(){
        const action = actionCreators.getHomeInfo();
        dispatch(action);
    },
    changeScrollTopShow() {
        if(document.documentElement.scrollTop > 100) {
            dispatch(actionCreators.toggleTopShow(true));
        } else {
            dispatch(actionCreators.toggleTopShow(false))
        }
    }
});
export default connect(mapStateToProps, mapDispatchToProps)(Home);